<template>
  <div style="">
    <Header :left="true" leftText="返回" title="用工确认-审核界面"> </Header>
    <div class="textScroll">
      <Form :style="autoHeight">
        <van-field
          label="部门名称"
          :value="companyname"
          readonly
          class="formstyle"
        />

        <van-field
          readonly
          label="日期选择"
          :value="form.planworkdatetime"
          class="formstyle"
        />

        <van-field
          readonly
          label="班次选择"
          :value="pshiftname"
          class="formstyle"
        />

        <van-field
          readonly
          label="实际用工人数"
          :value="form.factworksused"
          class="formstyle"
        />

        <van-field
          readonly
          label="实际用工工时"
          :value="form.workhour"
          class="formstyle"
        />

        <van-field
          readonly
          label="用工类型"
          :value="form.workertype"
          class="formstyle"
        />
      </Form>

      <Button
        color="#138087"
        :block="true"
        class="buttonRight"
        v-show="btnShow"
        :hairline="false"
        type="primary"
        text="审核"
        @click="auditform"
      />
      <Button
            color="#f58220"
        :block="true"
        class="buttonLeft"
        v-show="btnShow"
        type="danger"
        text="返回"
        @click="close"
      />
    </div>
  </div>
</template>

<script>
import {
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Row,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Col,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
} from "vant";
import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);

export default {
  name: "confirmlabor",
  components: {
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    VTable,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
  },
  data: function () {
    return {
      idindex: "",
      // employeetypevalue:'',
      employeetype: [
        "拌料工",
        "打包工",
        "入库员",
        "统计员",
        "粉碎工",
        "造料工",
        "返工",
        "技术员",
        "操作工",
      ],
      showPicker1: false,
      // faualemployeetimenumber:'',
      // faualemployeenumber:1,
      // radioteam: '1',
      btnShow: true,
      subButton: true, //提交按钮默认状态
      date: "",
      showdate: false,
      show: false,
      cascaderValue: "",
      options: [
        {
          text: "塑胶事业部",
          value: "1",
          children: [
            { text: "太仓工厂", value: "TC00" },
            { text: "重庆工厂", value: "CQ10" },
            { text: "广州工厂", value: "2030" },
            { text: "荆州工厂", value: "JZ10" },
            { text: "宿迁工厂", value: "SQ00" },
            { text: "天津环亚", value: "5030" },
          ],
        },
        {
          text: "两片罐事业部",
          value: "2",
          children: [{ text: "天津制罐公司", value: "5000" }],
        },
      ],
      form: {
        id: "",
      },
    };
  },
  //页面初始化监听事件
  created: function () {
    this.user = JSON.parse(storage.get("user"));
    this.idindex = api.pageParam.id;
    //根据符号分割数据依次填入
    var m = this.idindex.split(",");
    this.form.id = m[0];
    this.form.planworkdatetime = m[1];
    this.pshiftname = m[2];
    this.form.factworksused = m[3];
    this.form.workhour = m[4];
    this.form.workertype = m[5];
    this.user = JSON.parse(storage.get("user"));

    this.form.creator = this.user.userId;
    this.form.checktor = this.user.userId;
    this.companyname = this.user.dept.deptName;
    this.form.companyid = this.user.dept.deptId;
  },
  //页面初始化完成监听事件
  mounted: function () {
    const oldHight = api.winHeight;
    addEventListener("resize", () => {
      let newHight = api.winHeight;
      this.btnShow = newHight < oldHight ? false : true;
    });
  },
  methods: {
    onFinish({ selectedOptions }) {
      this.show = false;
      this.form.companyid = selectedOptions
        .map((option) => option.text)
        .join("/");
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.showdate = false;
      this.form.planworkdatetime = this.formatDate(date);
    },
    async auditform() {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "审核中...",
      });
      let _this = this;
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/manhourfact/confirmlabor/audit",
          {
            body: {
              id: _this.form.id,
              checktor: _this.form.creator,
              workhour: _this.form.workhour,
            },
          }
        );
        if (res.code === 200) {
          Toast.clear();
          Toast.success(res.msg);
          api.closeWin();
        } else {
          api.closeWin();
        }
      } catch (e) {
        alert(JSON.stringify(e));
      }
    },
    close() {
      api.closeWin();
    },
  },
};
</script>

<style>
body {
  background-color: white;
}
.table-title-class {
  background-color: #304156;
  color: #fff;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}
.formstyle {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 4rem;
  bottom: 5rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  z-index: 1;
}
.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}
.mg5 {
  margin-right: 5px;
}
.tag_margin {
  margin: 2px 5px;
}
.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}
.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}
.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}
.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}
.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}
</style>
